<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<!-- Import style -->
		<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
		<!-- Import Vue 3 -->
		<script src="//unpkg.com/vue@3"></script>
		<!-- Import component library -->
		<script src="//unpkg.com/element-plus"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
		<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
		<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
		<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

		<style>
            .edui-editor-iframeholder {
                width: 100%;
                height: 100%;
            }

            html, body, #app, .el-container {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .el-space{
                padding: 20px;
            }
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-space>
						<el-form :model="pdfModel" :inline="true">
							<el-form-item label="标题">
								<el-input v-model="pdfModel.title" placeholder="请输入标题"/>
							</el-form-item>
							<el-form-item label="作者">
								<el-input v-model="pdfModel.author" placeholder="请输入作者"/>
							</el-form-item>
							<el-form-item label="主题">
								<el-input v-model="pdfModel.subject" placeholder="请输入主题"/>
							</el-form-item>
							<el-form-item label="创建人">
								<el-input v-model="pdfModel.creator" placeholder="请输入创建人"/>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="save">保存数据</el-button>
								<el-link href="/export/pdf">导出PDF</el-link>
							</el-form-item>
						</el-form>
					</el-space>
				</el-header>
				<el-main>
					<div id="editor" style="width:100%;height:400px;"></div>
				</el-main>
			</el-container>
		</div>
		<script>
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            const ue = UE.getEditor('editor', {
                autoHeightEnabled: true,
                autoFloatEnabled: true
            });
		</script>
		<script>
            const {createApp} = Vue;
            const {ElMessage} = ElementPlus
            const request = axios.create({
                baseURL: 'http://localhost',
                timeout: 1000,
                headers: {'X-Custom-Header': 'foobar'}
            });
            const app = createApp({
                data() {
                    return {
                        pdfModel: {
                            content: '',
							author: '',
							creator: '',
							subject: '',
							title: ''
                        }
                    }
                },
                methods: {
                    save() {
                        this.pdfModel.content = ue.getContent();
                        request.put("/export/pdf", this.pdfModel,{
                            headers: {
								'Content-Type': 'application/json'
							}
                        }).then(res => {
                            if (res.data.code == 0) {
                                ElMessage.success('保存成功')
                            } else {
                                ElMessage.error(res.data.msg)
                            }
                        }).catch(err => {
                            ElMessage.error(err.message)
                        })
                    }
                },
            });
            app.use(ElementPlus);
            app.mount('#app');
		</script>
	</body>
</html>
